import React, { useEffect, useState } from 'react';
import './index.less';
import { Resizable } from 'react-resizable';
import { Input } from 'antd';
import { DatePicker, Space, Table } from 'antd';
import { request } from 'umi';
const { RangePicker } = DatePicker;
import { Select } from 'antd';
const handleChange = (value: string) => {
  console.log(`selected ${value}`);
};
export default function index() {
  const [components, setComponents] = useState({});
  const [_id, setId] = useState('');
  const [apply, setApplys] = useState([
    //  总数据渲染
    {
      id: 1,
      anumber: '你的流程未提交：张研',
      applyTime: '2023-02-08 10:41',
      status: '未读',
    },
    {
      id: 2,
      anumber: '你的流程为提交：加班申请单',
      applyTime: '2023-02-08 10:41',
      status: '未读',
    },
    {
      id: 3,
      anumber: '张研催办流程：销假申请单',
      applyTime: '2023-02-08 10:41',
      status: '已读',
    },
    {
      id: 4,
      anumber: '张研共享文档资料',
      applyTime: '2023-02-08 10:41',
      status: '已读',
    },
    {
      id: 5,
      anumber: '张研催办流程：销假申请单',
      applyTime: '2023-02-08 10:41',
      status: '未读',
    },
  ]);
  const [acolumns, setAcolumns] = useState([
    {
      title: '序号',
      key: 'id',
      width: 40,
      render: (text: any, record: any, index: any) => <>{index + 1}</>,
      ellipsis: true,
    },
    {
      title: '消息名称',
      key: 'anumber',
      width: 240,
      dataIndex: 'anumber',
      ellipsis: true,
    },
    {
      title: '提醒时间',
      dataIndex: 'applyTime',
      key: 'applyTime',
      ellipsis: true,
      width: 100,
    },

    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      ellipsis: true,
      width: 100,
    },
  ]);

  const ResizeableTitle = (props: any) => {
    const { onResize, width = 100, ...restProps } = props;
    if (!width) {
      return <th {...restProps} />;
    }
    return (
      <Resizable width={width} height={38} onResize={onResize}>
        <th {...restProps} />
      </Resizable>
    );
  };
  const handleResize =
    (index: any) =>
    (e: any, { size }: any) => {
      const nextColumns = [...columns];
      nextColumns[index] = {
        ...nextColumns[index],
        width: size.width,
      };
      setAcolumns(nextColumns);
    };
  const columns = acolumns.map((col, index) => ({
    ...col,
    onHeaderCell: () => ({
      width: col.width || 100,
      onResize: handleResize(index),
    }),
  }));
  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
  const onSelectChange = (newSelectedRowKeys: any) => {
    console.log('selectedRowKeys changed: ', newSelectedRowKeys);
    setSelectedRowKeys(newSelectedRowKeys);
  };
  const rowSelection = {
    selectedRowKeys,
    onChange: onSelectChange,
  };
  const stateData = () => {
    // request('/api/ljf/apply').then((res) => {
    //   setApplys(res.apply);
    // });
    // setApplys(data);

    setComponents({
      header: {
        cell: ResizeableTitle,
      },
    });
  };
  useEffect(() => {
    stateData();
  }, []);
  return (
    <div className="info_bubble">
      <div className="info_bubble_header">
        <button>标记为已读</button>
      </div>
      <div className="info_bubble_content">
        <div className="info_bubble_content_header">
          <ul>
            <li>
              <label htmlFor="">消息名称：</label>
              <Input
                style={{
                  width: '48%',
                  padding: '0',
                  margin: '0',
                  height: '30px',
                }}
                placeholder="Basic usage"
              />
            </li>
            <li>
              <label htmlFor="">提醒日期：</label>
              <RangePicker />
            </li>
            <li style={{ marginLeft: '3%' }}>
              <label htmlFor="">消息状态：</label>
              <Select
                defaultValue="全部"
                style={{ width: 70 }}
                onChange={handleChange}
                options={[
                  { value: '0', label: '全部' },
                  { value: '未读', label: '未读' },
                  { value: '已读', label: '已读' },
                ]}
              />
            </li>
          </ul>
          <button>查询</button>
        </div>
        <div className="info_bubble_content_table">
          <Table
            style={{ marginBottom: '20px' }}
            components={components}
            columns={columns}
            pagination={false}
            bordered
            rowKey="_id"
            scroll={{
              x: 1278,
              y: 460,
            }}
            rowSelection={rowSelection}
            onRow={(record, index) => {
              return {
                onClick: (e) => {
                  let tr = e.target?.parentNode;
                  for (let i = 0; i < tr.parentNode.childNodes.length; i++) {
                    tr.parentNode.childNodes[i].style.color = 'black';
                  }
                  tr.style.color = '#e17009';
                },
              };
            }}
            dataSource={apply}
          />
        </div>
      </div>
    </div>
  );
}
